import { EPSG3857 } from "../geo/crs/CRS.EPSG3857.js";
import { EPSG4326 } from "../geo/crs/CRS.EPSG4326.js";
import { Point, toPoint } from "../geometry/Point.js";
import { toLatLng } from "../geo/LatLng";
import * as DomUtil from "../dom/DomUtil.js";

import handle from "../../handle.js";



import { GridLayer } from "../layer/tile/GridLayer.js";

export default class Map {
  options = {
    crs: EPSG3857(),
    center: undefined,
    zoom: undefined,
    minZoom: undefined,
    maxZoom: undefined,
    layers: [],
    maxBounds: undefined,

    renderer: undefined,

    zoomAnimation: true,

    zoomAnimationThreshold: 4,

    fadeAnimation: true,

    markerZoomAnimation: true,

    transform3DLimit: 8388608, // Precision limit of a 32-bit float

    zoomSnap: 1,

    zoomDelta: 1,

    trackResize: true,
  };

  _zoom;

  constructor(id, options) {
    // this.options = options;

    console.log(options, "options");
    if (options?.crs === 'EPSG4326') { 
    this.options.crs =  EPSG4326()
    }



    this._container = document.getElementById(id);
    this._ctx = this._container.getContext("2d");
    this._handle = new handle(this);
//  this._handle.start();
  }

  setView(center, zoom, options) {
    this._zoom = zoom;


    this._handle.setView(center, zoom);

    this.options.center = center;


    this._loaded = true; // 先设了加载完成
    this._pixelOrigin = this._getNewPixelOrigin(center, zoom);

		console.log(this._pixelOrigin, "this._pixelOrigin");



    this._gridlayer = new GridLayer(
      this,
      center[0],
      center[1],
      zoom,
      this._ctx
    );
    return this;
  }

  moveMap(x) {
      this._gridlayer.moveTo(x) 
     }



  panTo(center, options) {
    return this.setView(center, this._zoom, { pan: options });
  }

  layerPointToLatLng(point) {

    console.log(point, this.getPixelOrigin(), "333333");

    //投影点
    const projectedPoint = toPoint(point).add(this.getPixelOrigin());
    return this.unproject(projectedPoint, this._zoom);
  }

  	latLngToLayerPoint(latlng) {
		const projectedPoint = this.project(toLatLng(latlng))._round();
		return projectedPoint._subtract(this.getPixelOrigin());
	}

  _getNewPixelOrigin(center, zoom) {

    const viewHalf = this.getSize()._divideBy(2);

    // console.log(this.project(center, zoom),viewHalf, this.project(center, zoom)
    //   ._subtract(viewHalf)
    //   ._add(this._getMapPanePos())
    //   ._round(), 'jin')

    return this.project(center, zoom)
      ._subtract(viewHalf)
      ._add(this._getMapPanePos())
      ._round();
  }
  _getMapPanePos() {
    return DomUtil.getPosition(this._mapPane) || new Point(0, 0);
  }
  project(latlng, zoom) {
    zoom = zoom === undefined ? this._zoom : zoom;
    return this.options.crs.latLngToPoint(toLatLng(latlng), zoom);
  }
  _checkIfLoaded() {
    if (!this._loaded) {
      throw new Error("Set map center and zoom first.");
    }
  }

  /**
   * 取消投影
   * @param {*} point
   * @param {*} zoom
   * @returns
   */
  unproject(point, zoom) {
    zoom = zoom === undefined ? this._zoom : zoom;
    return this.options.crs.pointToLatLng(toPoint(point), zoom);
  }

  getPixelOrigin() {
    // this._checkIfLoaded();
    return this._pixelOrigin;
  }
  getSize() {
    if (!this._size || this._sizeChanged) {
      this._size = new Point(
        this._container.clientWidth || 0,
        this._container.clientHeight || 0
      );

      this._sizeChanged = false;
    }
    return this._size.clone();
  }
}

export const createMap = (id, options) => {
  return new Map(id, options);
};
